<div class="mb-3">
  <label class="form-label" [for]="inputId">{{title}}</label>
  <div class="input-group" [class.is-invalid]="error">
    <input #inputField [type]="showReveal && textVisible ? 'text' : 'password'" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (focus)="onFocus()" (focusout)="onFocusOut()" (change)="onChange(value)" [disabled]="disabled" [autocomplete]="autocomplete">
    <button *ngIf="showReveal" type="button" class="btn btn-outline-secondary" (click)="toggleVisibility()" i18n-title title="Show password" [disabled]="disabled || disableRevealToggle">
      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
        <use xlink:href="assets/bootstrap-icons.svg#eye" />
      </svg>
    </button>
  </div>
  <div class="invalid-feedback">
    {{error}}
  </div>
  <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
</div>
